<template>
  <div class="three-box"></div>
</template>

<script setup>
import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  MeshBasicMaterial,
  Mesh,
  AxesHelper
} from "three";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { onMounted } from "vue";

const renderer = new WebGLRenderer();

onMounted(() => {
  const dom = document.querySelector(".three-box");
  // console.log("dom======>", dom, dom.offsetWidth, dom.offsetHeight);
  renderer.setSize(dom.offsetWidth, dom.offsetHeight);

  dom.appendChild(renderer.domElement);

  const camera = new PerspectiveCamera(
    45,
    dom.offsetWidth / dom.offsetHeight,
    0.1,
    1000
  );

  const controls = new OrbitControls(camera, renderer.domElement);

  camera.position.set(0, 0, 10);
  // camera.lookAt( 0, 0, 0 );

  const scene = new Scene();

  scene.add(camera);

  // 显示三维坐标系
  const axesHelper = new AxesHelper(5);
  scene.add(axesHelper);

  const loader = new FontLoader();

  loader.load("fonts/gentilis_regular.typeface.json", function (font) {
    const geometry = new TextGeometry("Hello three.js!", {
      font: font,
      size: 0.5,
      height: 0.1,
      curveSegments: 0.1,
      bevelEnabled: true,
      bevelThickness: 0,
      bevelSize: 0.01,
      bevelSegments: 0
    });
    console.log("=======>", geometry);
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;
  });

  controls.update();

  // renderer.render( scene, camera );

  function animate() {
    requestAnimationFrame(animate);

    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    controls.update();

    renderer.render(scene, camera);
  }

  animate();

  // const geometry = new BoxGeometry( 1, 1, 1 );

  // renderer.render( scene, camera );
});
</script>

<style lang="less" scoped>
.three-box {
  width: 100%;
  height: 100vh;
}
</style>
